<template>
  <div class="content-card">
    <div class="title">
      <div
        class="btn"
        :class="{ 'btn-active': btnActive === 'left' }"
        @click="setBtnActive('left')"
      >
        {{ "资源目录下载量排名" }}
      </div>
      <div
        class="btn"
        :class="{ 'btn-active': btnActive === 'right' }"
        @click="setBtnActive('right')"
      >
        {{ "接口调用次数排名" }}
      </div>
    </div>
    <div class="body">
      <div id="data-dev__chart2"></div>
    </div>
  </div>
</template>

<script>
import API from "@/api/develop";
export default {
  name: "d4-chart",
  data() {
    return {
      btnActive: "left",
      charts2Ref: {},
        xdata: [],
        ydata: []
    };
  },
  methods: {
    registerCharts2() {
      this.charts2Ref = this.$echarts.init(
        document.getElementById("data-dev__chart2")
      );
    },
    setChart2(target) {
      let option2_1 = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          data: this.xdata,
        },
        yAxis: {
          name: "数量",
        },
        series: [
          {
            name: "排名",
            type: "bar",
            data: this.ydata,
            barWidth: 10,
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#93B9FF",
                },
                {
                  offset: 1,
                  color: "#5C87D4",
                },
              ]),
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let option2_2 = {
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          show: false,
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: [
            "户籍信息",
            "车辆信息",
            "车辆信息",
            "不动产证明",
            "户籍信息",
            "车辆信息",
            "车辆信息",
            "车辆信息",
            "车辆信息",
          ],
        },
        series: [
          {
            name: "高频Top5",
            type: "bar",
            data: [11, 15, 86, 95, 104, 112, 130, 143, 152],
            barWidth: 10,
            showBackground: true,
            backgroundStyle: {
              color: "#F0F0F0",
            },
            itemStyle: {
              borderRadius: 4,
              label: {
                show: true,
                textStyle: {
                  color: "black",
                  fontSize: 16,
                },
              },
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#93B9FF" },
                { offset: 1, color: "#5C87D4" },
              ]),
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      let option2 = {
        left: option2_1,
        right: option2_2,
      };
      this.charts2Ref.setOption(option2[target], true);
    },
    setBtnActive(target) {
      if (target === this.btnActive) {
        return;
      }
      this.btnActive = target;
      this.setChart2(this.btnActive);
    },
      getBoxData() {
          let handleV1 = (res) => (this.changedata(res.data.body.data),this.registerCharts2(),
          this.setChart2(this.btnActive));


          API.getzyxzpm().then(handleV1);

      },
      changedata(arr){
        this.xdata = [];
        this.ydata = [];
        for(let item in arr){
          this.xdata.push(arr[item].CATALOG_NAME);
          this.ydata.push(arr[item].DOWN_COUNT)
        }

      },
      getTask() {
          return () => {
              this.getBoxData();
          };
      },
  },
  mounted() {
    this.getTask()(); // 先执行 一次任务
    this.timer = setInterval(this.getTask(), 30000); // 设置周期触发任务

  },
};
</script>

<style lang="less" scoped>
.content-card {
  .title {
    padding: 10px;
    display: flex;
    justify-content: center;
    .btn-active {
      background: #698bc0;
      color: white;
    }
    .btn {
      padding: 10px 20px;
      font-size: 14px;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
      filter: drop-shadow(1px 1px 3px #698bc0);
      &:nth-child(1) {
        border-top-left-radius: 26px;
        border-bottom-left-radius: 26px;
        margin-right: 10px;
      }
      &:nth-child(2) {
        border-top-right-radius: 26px;
        border-bottom-right-radius: 26px;
      }
    }
  }
  .body {
    width: 100%;
    height: 300px;
    :nth-child(1) {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
